<template>

  <GlobalPage>

    <div class="table-box">

      <el-table :data="Data.list" style="font-size: 10px">
        <el-table-column type="selection" width="35" align="center">
        </el-table-column>
        <el-table-column prop="id" label="ID" width="45" align="center">
        </el-table-column>
        <el-table-column label="头像" width="45" align="center">
          <template #default="scope">
            <div class="user-table-avatar">
              <img class="user-table-avatar-img" :src="scope.row.avatar" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="140"> </el-table-column>
        <el-table-column prop="address" label="拉黑时间"> </el-table-column>
        <el-table-column prop="address" label="拉黑原因"> </el-table-column>
        <el-table-column width="50" fixed="right" label="操作" align="center">
          <template #default="{ row, $index: index }">
            <el-dropdown>
              <el-button :icon="MoreFilled" circle />
              <template #dropdown>
                <el-dropdown-menu >
                  <el-dropdown-item @click="removeBlackList(row)">移出黑名单</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <GlobalPagination></GlobalPagination>

    </div>

    <el-dialog v-model="BlackInfoDialogShow" :title="BlackInfoDialogTitle" width="800">
      <el-table :data="gridData">
        <el-table-column property="date" label="Date" width="150" />
        <el-table-column property="name" label="Name" width="200" />
        <el-table-column property="address" label="Address" />
      </el-table>
    </el-dialog>
  </GlobalPage>
</template>

<script setup>

import API from "@/api";
import { ElMessage } from "element-plus";
import { onBeforeMount, reactive, ref } from "vue";
const DeleteBlackTitle = ref("是否确定移除黑名单？");
import GlobalPage from '@/components/Global-Page/Global-Page.vue'
import GlobalPagination from "@/components/GlobalPagination/index.vue";
import GlobalTable from "@/components/Global-Table/Global-Table.vue";
import { MoreFilled, View, Edit } from "@element-plus/icons-vue";
// 黑名单详情弹窗显示状态
const BlackInfoDialogShow = ref(false);
// 黑名单详情弹窗标题
const BlackInfoDialogTitle = ref("黑名单详情");

const Data = reactive({
  page: null,
  pages: null,
  limit: null,
  list: [],
});
onBeforeMount(() => {
  GetBlakcList();
});

function GetBlakcList() {
  API.Manage.BlackList()
    .then((res) => {
      console.log(res);
      let { data } = res;
      let { list } = data;
      Data.list = list;
    })
    .catch((err) => {
      console.log(err);
    });
}

function clickInfo(row, index) {
  BlackInfoDialogShow.value = true;
}

function removeBlackList(e, index) {
  let id = e.id;

  if (!id) {
    return
  }

  API.Manage.CancelBlack({
    user: id,
  })
    .then((res) => {
      // 移除
      Data.list.splice(index, 1);
      // 弹出提示
      ElMessage({
        message: "移除成功",
        type: "success",
      });
      GetBlakcList();
    })
    .catch((err) => {
      console.log(err);
    });
}

function limitChange(e) {
  let limit = Data.limit;
  if (limit != e) {
    Data.limit = e;
    GetBlakcList();
  }
}
function paginationChange(e) {
  let page = Data.page;
  if (page != e) {
    Data.page = e;
    GetBlakcList();
  }
}
</script>
<style>
.table-options {
  justify-content: space-around;
}
</style>